<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="../../../js/layui/css/layui.css">
<link rel="stylesheet"
	href="../../../css/Semantic-UI-CSS-master/semantic.min.css" />
<style>
* {
	margin: 0;
	padding: 0;
}

.zth-body-container {
	width: 100%;
	height: auto;
	border: 1px solid;
}

.zth-container-location {
	margin-top: 30px;
	margin-left: 300px;
}

.zth-container-text {
	width: 90%;
	margin-left: 35px;
}

.zth-location-label label {
	font-size: 18px;
	font-weight: bold;
	display: inline-block;
	margin-bottom: 10px;
}

.zth-p-br {
	height: 15px;
}

.zth-contact-location {
	margin-top: 30px;
}

/* //评论 */
.zth-comment-container {
	margin-top: 80px;
}

.zth-comment-container label {
	margin-bottom: 10px;
	font-size: 18px;
	display: inline-block;
	margin-left: 430px;
}

.zth-show-comment {
	border-top: 1px solid;
	border-bottom: 1px solid;
	width: 80%;
	height: 500px;
	padding: 10px;
}

.zth-show-comment img {
	border-radius: 50px;
	width: 50px;
	height: 50px;
}

.zth-contact-comment {
	margin-top: 80px;
	width: 80%;
	margin-bottom: 20px;
}

.zth-comment-label {
	text-align: center;
	margin-bottom: 10px;
}

.zth-comment-name {
	margin-left: 25px;
	position: relative;
	top: 10px;
}

.zth-comment-date {
	margin-left: 75px;
}

.zth-comment-text {
	border: 1px solid;
	padding: 10px;
	border-radius: 25px;
	margin-top: 5px;
	margin-left: 75px;
}

.zth-text-input input[type='text'], input[type='email'] {
	width: 100%;
	height: 30px;
	margin-bottom: 5px;
}

.layui-input-block textarea {
	position: relative;
	right: 110px;
}

.zth-input-but {
	margin-top: 20px;
	margin-left: 400px;
}

.zth-comment-hint {
	font-size: 40px;
	font-weight: bold;
	font-family: '楷体';
	text-align: center;
	margin-top: 250px;
}

.zth-botton-but{
	margin-top: 50px;
	text-align: center;
	font-size: 20px;
}




/* 验证码 */
.input-val {
	box-sizing: border-box;
}

#canvas {
	vertical-align: middle;
	box-sizing: border-box;
	border: 1px solid #ddd;
	cursor: pointer;
}

.btn {
	display: block;
	width: 100px;
	font-size: 16px;
	color: #fff;
	background-color: #457adb;
	border: none;
	border-radius: 50px;
}
</style>
</head>
<body>
	<div class="zth-body-container" id="app">
		<div class="zth-container-location">
			<div>
				<div class="zth-location-label">
					<label v-show="rest1">About me</label> <label v-show="rest2">内容</label>
				</div>
				<div class="zth-container-text" v-html="content"></div>
			</div>

			<div class="zth-contact-location">
				<div class="zth-location-label">
					<label>contact</label>
				</div>
				<div class="zth-container-text">
					<ul>
						<li>我的邮箱：32****11723402@qq.com</li>
						<li>QQ技术交流群：123*****89</li>
						<li>我的网站：www.zth.com</li>
					</ul>
				</div>
			</div>


			<!-- 显示评论 -->
			<div class="zth-comment-container">
				<div>
					<label>评论内容</label>
				</div>
				<div class="zth-show-comment">
					<div style="margin-top: 20px;" v-for="ss in comments"
						v-show="ShowHidden">
						<div>
							<img alt="" src="../../../images/1.jpg"> <span
								class="zth-comment-name">{{ss.commentator}}</span>
						</div>
						<div class="zth-comment-date">评论时间：{{ss.comment_create_time}}</div>
						<div class="zth-comment-text">{{ss.comment_body}}</div>
					</div>
					<div class="zth-botton-but">
						<i class="arrow left icon" @click="down" v-if="index>1" style="font-size: 35px;"></i> 
						<span>{{index}}</span> 
						<i class="arrow right icon" @click="below" v-if="index<length/2" style="font-size: 35px;"></i>
					</div> 
					<div v-show="hint" class="zth-comment-hint">
						该篇博客无评论或者该评论还未通过审核</div>
				</div>
			</div>

			<div class="zth-contact-comment">
				<div class="zth-comment-label"> 
					<label>添加评论</label>
				</div>
				<div class="zth-container-text">
					<div class="zth-text-input">
						<div>
							<input type="text" v-model="commentator" placeholder="称呼（必填）">
						</div>
						<div>
							<input type="email" v-model="email" placeholder="邮箱（必填）">
						</div>
						<div>
							<input type="text" v-model="website_url" placeholder="网址（选填）">
						</div>
						<div>
							<div class="code">
								  <input type="text" placeholder="请输入验证码（不区分大小写）"
									style="width: 50%; margin-left: -5px" class="input-val">
								  
								<canvas id="canvas" width="100" height="30"></canvas>
							</div>
						</div>
						<div>
							<div class="layui-input-block">
								<textarea placeholder="请输入内容" v-model="comment_body"
									class="layui-textarea" name="desc">
							 </textarea>
							</div>
						</div>
						<div class="zth-input-but">
							<button type="button" class="layui-btn btn">提交</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<script src="../../../js/vue/axios.min.js"></script>
	<script src="../../../js/jquery.min.js"></script>
	<script src="../../../js/vue/vue.js"></script>
	<script src="../../../js/layui/layui.js"></script>
	<script>
		
		var href=location.href;
		var sub=href.substr(href.indexOf('=')+1,href.length);
		
		layui.use('layer',function(){
			
		});
		
		var mv= new Vue({
			el:'#app',
			data(){
				return{
					blogs:[],//储存博客数据
					content:'',//储存博客内容数据
					comments:[],//储存评论数据
					blog_id:sub,//博客主表id
					commentator:'',//称呼
					email:'',//邮箱
					website_url:'',//网址
					comment_body:'',//评论内容
					ShowHidden: true,//隐藏显示评论内容
					hint: false,//提示语句隐藏显示
					rest1:true,//显示隐藏标题
					rest2:false,//显示隐藏标题
					length:0,//储存数据长度
					index:1,//储存当前页数
				}
			},
			mounted:function(){
				this.contentShow();
				this.checkComment();
			},
			methods:{
				//显示博客主表数据
				contentShow:function(){
					if(sub!=1){
						this.rest1=false;
						this.rest2=true;
					}
					
					axios.get('/ssb/blog/blogById?id='+sub).then(res=>{
						this.content=res.data.blog_content;
						this.blogs=res.data;
					},err=>{
						console.log(err);
					})
				},
				//添加评论
				addComment:function(){
					if(this.blogs.enable_comment==0){
					if(
						this.commentator==null || this.commentator==''||
						this.email==null || this.email==''||
						this.comment_body==null || this.comment_body==''
						){
						alert("必填项不能为空！");
					}else{
					
					var params = new URLSearchParams();
					params.append('blog_id',this.blog_id);
					params.append('commentator',this.commentator);
					params.append('email',this.email);
					params.append('website_url',this.website_url);
					params.append('comment_body',this.comment_body);
					axios.post('/ssb/comment/add',params).then(res=>{
						if(res.data>0){
							layer.alert("提交成功！");
							this.commentator='';
							this.email='';
							this.website_url='';
							this.comment_body='';
						}else{
							layer.alert("提交失败！");
						}
					},err=>{
						console.log(err);
					});
					
					}
					}else{
						layer.alert("该博客不允许评论！");
					}
				},
				//显示评论
				checkComment:function(){
					axios.get('/ssb/comment/commentAll?comment_status=1&limit=3&blog_id='+sub+"&page="+this.index).then(res=>{
						if(res.data.data.length>0){
							this.length=res.data.data.length;
							var result=res.data.data
							result.sort(sortId);
							this.comments=result;
						}else{
							this.ShowHidden=false;
							this.hint=true;
						}
					},err=>{
						console.log(err);
					});
				},
				//下一页
				below:function(){
					this.index++;
					this.checkComment();
				},
				//上一页
				down:function(){
					this.index--;
					this.checkComment();
				},
			}
		});
		
		//排序
		function sortId(a,b){  
		       return b.comment_id-a.comment_id
		    }
		
		
		//生成验证码
		$(function(){
			  var show_num = [];
			  draw(show_num);
			  $("#canvas").on('click',function(){
			   draw(show_num);
			  })
			  $(".btn").on('click',function(){
			   var val = $(".input-val").val().toLowerCase();
			   var num = show_num.join("");
			   if(val==''){
			    alert('请输入验证码！');
			   }else if(val == num){
				   mv.addComment();
			    $(".input-val").val('');
			    // draw(show_num);
			   }else{
			    alert('验证码错误！请重新输入！');
			    $(".input-val").val('');
			    // draw(show_num);
			   }
			  })
			 })
			 //生成并渲染出验证码图形
			 function draw(show_num) {
			  var canvas_width=$('#canvas').width();
			  var canvas_height=$('#canvas').height();
			  var canvas = document.getElementById("canvas");//获取到canvas的对象，演员
			  var context = canvas.getContext("2d");//获取到canvas画图的环境，演员表演的舞台
			  canvas.width = canvas_width;
			  canvas.height = canvas_height;
			  var sCode = "a,b,c,d,e,f,g,h,i,j,k,m,n,p,q,r,s,t,u,v,w,x,y,z,A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
			  var aCode = sCode.split(",");
			  var aLength = aCode.length;//获取到数组的长度
			  for (var i = 0; i < 4; i++) { //这里的for循环可以控制验证码位数（如果想显示6位数，4改成6即可）
			   var j = Math.floor(Math.random() * aLength);//获取到随机的索引值
			   // var deg = Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度
			   var deg = Math.random() - 0.5; //产生一个随机弧度
			   var txt = aCode[j];//得到随机的一个内容
			   show_num[i] = txt.toLowerCase();
			   var x = 10 + i * 20;//文字在canvas上的x坐标
			   var y = 20 + Math.random() * 8;//文字在canvas上的y坐标
			   context.font = "bold 23px 微软雅黑";
			   context.translate(x, y);
			   context.rotate(deg);
			   context.fillStyle = randomColor();
			   context.fillText(txt, 0, 0);
			   context.rotate(-deg);
			   context.translate(-x, -y);
			  }
			  for (var i = 0; i <= 5; i++) { //验证码上显示线条
			   context.strokeStyle = randomColor();
			   context.beginPath();
			   context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
			   context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
			   context.stroke();
			  }
			  for (var i = 0; i <= 30; i++) { //验证码上显示小点
			   context.strokeStyle = randomColor();
			   context.beginPath();
			   var x = Math.random() * canvas_width;
			   var y = Math.random() * canvas_height;
			   context.moveTo(x, y);
			   context.lineTo(x + 1, y + 1);
			   context.stroke();
			  }
			 }
			 //得到随机的颜色值
			 function randomColor() {
			  var r = Math.floor(Math.random() * 256);
			  var g = Math.floor(Math.random() * 256);
			  var b = Math.floor(Math.random() * 256);
			  return "rgb(" + r + "," + g + "," + b + ")";
			 }
	</script>
</body>
</html>
